<template>
  <div>
    <Pop title="领取提示" @hidePop="hideGiftCodePop">
      <div slot="body" class="gift">
        <p class="gift__code">
          <span>兑换码:</span>
          <label class="gift__label">
            <span>{{giftDetail.code || giftDetail.gift_code}}</span>
          </label></p>
        <p class="gift__text">复制兑换码，去游戏中使用</p>
      </div>
      <div slot="foot">
        <button class="pop__btn" data-clipboard-action="copy" :data-clipboard-text="giftDetail.code || giftDetail.gift_code">复制</button>
      </div>
    </Pop>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Clipboard from 'clipboard'
import Pop from '../pop/Index'

export default {
  name: 'giftCodePop',
  components: {
    Pop
  },
  computed: {
    ...mapGetters([
      'giftDetail'
    ])
  },
  methods: {
    hideGiftCodePop () {
      this.$store.commit('SET_POP_STATUS', {
        type: 'giftCode',
        show: false
      })
    }
  },
  created () {
    let clipboard = new Clipboard('.pop__btn')
    clipboard.on('success', e => {
      this.toast('复制成功！')
      this.hideGiftCodePop()
    })
    clipboard.on('error', e => {
      this.hideGiftCodePop()
    })
  }
}
</script>

<style scoped lang="scss">
.gift {
  color: #666;
  text-align: center;

  &__code {
    font-size: 0.14rem;
    margin-bottom: 0.08rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    span{
      width: 50px;
    }
  }

  &__label {
    flex: 1;
    background-color: #f0f0f0;
    height: 0.24rem;
    line-height: 0.24rem;
    padding: 0 0.12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
  }

  &__text {
    font-size: 0.11rem;
  }
}

.pop__btn {
  margin-bottom: -0.1rem;
}
</style>
